/* CSS盒子模型实例代码 */

/* 重置默认样式，使效果更清晰 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 使用border-box模型，更直观 */
}

body {
    font-family: Arial, sans-serif;
    padding: 20px;
    background-color: #f4f4f4;
}

.container {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

/* 标准盒子模型示例 */
.box {
    width: 200px;
    height: 100px;
    
    /* 内边距 (Padding) */
    padding: 20px;
    
    /* 边框 (Border) */
    border: 5px solid #007acc;
    
    /* 外边距 (Margin) */
    margin: 30px;
    
    /* 背景 */
    background-color: #ffffff;
    
    /* 文本样式 */
    text-align: center;
    line-height: 100px;
    font-weight: bold;
    color: #333;
}

/* 展示不同部分的盒子（使用不同颜色区分） */
.box-content {
    background-color: #e8f5e9;
    border-color: #4caf50;
}

.box-padding {
    background-color: #ffebee;
    border-color: #f44336;
}

.box-border {
    background-color: #e3f2fd;
    border-color: #2196f3;
}

.box-margin {
    background-color: #fff3e0;
    border-color: #ff9800;
}